<template>
    <!-- 素材中心 -->
    <div class="">
        <div class="head">
            <span>素材中心</span>
        </div>
        <button class="bu1" @click="bu1">添加素材</button>
        <div class="searchFor">
            <div class="searchFor-2">
                <span>素材名称搜索</span>
                <input type="text" placeholder="输入素材名称搜索" class="sousuo">
                <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp素材类型</span>
                <el-select v-model="value2" class="m-2" placeholder="全部" size="small">
                    <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :popper-append-to-body="false"
                    />
                </el-select>
                <span>创建时间</span>
                <el-date-picker
                  v-model="value13"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                  style="width: 120px;"
                />
                <span>至</span>
                <el-date-picker
                  v-model="value14"
                  type="date"
                  placeholder="Pick a date"
                  :default-value="new Date(2023, 5, 5)"
                  style="width: 120px;"
                />
                <button class="bu2">筛选</button>
                <span class="remove">清空</span>
            </div>
        </div>
        <div class="form">
            <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%"
            >
            <el-table-column prop="name" label="素材名称" width="180" align="center"/>
            <el-table-column prop="Copywriting" label="素材文案" align="center"/>
            <el-table-column prop="type" label="素材类型" align="center"/>
            <el-table-column prop="commodity"  label="关联商品" align="center" />
            <el-table-column prop="share"  label="分享次数" align="center"/>
            <el-table-column prop="time" label="创建时间" align="center"/>
            <el-table-column fixed="right" label="operate" width="150" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                >编辑</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="deleteRow(scope.row)"
                >删除</el-button>
                
            </template>
            </el-table-column>
            
            </el-table>
            <!-- 分页 -->
          <el-pagination
            :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            :total="Total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        
       
        
        
    </div>
</template>

<script setup lang="ts">
import { ref,onBeforeMount, reactive } from 'vue'
import { useRouter } from 'vue-router'

const value2 = ref('')
const value3=ref('')
const pagesize=ref(5) //每页显示多少条
const currentPage=ref(1) //当前是第几页
const Total=ref() //总条数

// 多久到多久的日期
const value13 = ref('')
const value14 = ref('黄金')
// 路由
const router=useRouter()
onBeforeMount(()=>{
  // Total.value=Number(Math.ceil(tableData.length/pagesize.value)+'0') //初始化更新分页总数
  Total.value=Number(tableData.value.length) //初始化更新分页总数
  console.log(document.getElementsByClassName('el-pagination__goto'));
  
  
})
// 素材类型
const options2 = [
  {
    value: '全部',
    label: '全部',
  },
  {
    value: '图片',
    label: '图片',
  },
  {
    value: '视频',
    label: '视频',
  },
]
// 表格

let tableData= ref([
  {
    name:'素材名称1',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称2',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称3',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称4',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称5',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称6',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称7',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
  {
    name:'素材名称8',//名称
    Copywriting:"文案文案",//文案
    type: '12987122',//类型
    commodity:'白银',//关联商品
    share: '雨神',//分享次数
    time: '2021.02.14 15:20:00'//创建时间
  },
])
// 表格后面的按钮
const deleteRow = (index: number) => {
    for(let a in tableData.value){
        // console.log(typeof a);
        let b=Number(a)
        if(index.name==tableData.value[a].name){
            tableData.value.splice(b, 1)
            // console.log(tableData);
            
        }
        
    }
//   tableData.value.splice(index, 1)
// console.log(index);
// router.push({
//   path:"/details"
// })
}

// 分页
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pagesize.value=val
  // console.log(pagesize.value=val);
  
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  // console.log(val);
  currentPage.value=val

  
}

</script>

<style scoped lang="less">
@zi:14px;
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
.bu1{
    border-radius: 5px;
    border: 1px solid #ed742f;
    background-color: #ed742f;
    color: white;
    width: 90px;
    height:30px;
    line-height: 23px;
    margin-top: 10px;
    margin-bottom: 15px;
}
// 搜索
.searchFor{
    width: 100%;
    height:130px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #2c2c2c;
    font-size:16px;
    margin-bottom: 20px;
    span{
        margin-right: 10px;
        margin-left: 20px;
    }
    .sousuo{
        width:200px;
        text-align: center;
        height: 25px;
        border-radius: 5px ;
        border: 1px solid #000000
    }
    .bu2{
        border-radius: 5px;
        border: 1px solid #ed742f;
        background-color: #ed742f;
        color: white;
        width: 60px;
        height:30px;
        line-height: 23px;
        margin-left: 20px;
    }
    .remove{
        color: #ed742f;
    }
}
// 改变下拉框样式
.el-select{
  height:28px
}
//表格数据
.form{
width: 100%;
box-sizing: border-box;
padding: 20px;
background-color: white;
}
.el-pagination{
  display: flex;
  justify-content:flex-end ;
  margin-top: 20px;
}


// 按钮

.closebutton{
      width: 110px;
      height: 35px;
      background-color: white;
      border: 1px solid green;
      border-radius: 5px;
      margin-right: 60px;
      margin-top: 20px;
    }
.passbutton{
      width: 110px;
      height: 35px;
      background-color: #623ceb;
      border: 1px solid #623ceb;
      color: white;
      border-radius: 5px;
      margin-top: 20px;
    }
  // 通过的模态框
  .passView{
  position: absolute;
  width: 600px;
  height:400px;
  background-color: white;
  left:35%;
  top:20%;
  box-sizing: border-box;
  padding: 10px;
}
  // 拒绝的模态框
.refuseView{
  position: absolute;
  width: 800px;
  height:600px;
  background-color: white;
  left:30%;
  top:15%;
  box-sizing: border-box;
  padding: 10px;
}
//清退的模态框
.ClearanceshowView{
  position: absolute;
  width: 600px;
  height:500px;
  background-color: white;
  left:35%;
  top:15%;
  box-sizing: border-box;
  padding: 10px;
// 清退分销商
.refuseView-Z{
  .refuseView-Z-x{
    display: flex;
    margin-top: 10px;
    div{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #e5de33;
      color:#000000;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      margin-left: 10px;
    }
    span{
      font-size:14px
    }
  }
  .refuseView-Z-y{
    width: 100%;
    height: 320px;
    margin-top:20px;
    display: flex;
  }
  .refuseView-Z-y-head{
    margin-left:10px;
    color: #333333;
    font-size: 14px;
    margin-right: 20px;
    margin-top: 10px;
  }
  /deep/.el-radio-group{
    flex-direction: column;
    align-items: flex-start
  }
  .el-radio.el-radio--large{
    margin-bottom:30px;
  }
}
}
.buttonwei{
  float: right;
}
.refuseView-Z-y-a{
  position: absolute;
  top: 130px;
  font-size: @zi;
  left:174px;
  color: rgba(0, 0, 0, 0.34);

}
.refuseView-Z-y-b{
  position: absolute;
  top: 200px;
  font-size: @zi;
  left:174px;
  color: rgba(0, 0, 0, 0.34);
}
.refuseView-Z-y-c{
  position: absolute;
  top: 235px;
  font-size: @zi;
  left:170px;
  width: 250px;
  height:30px;
  padding-left: 10px;
  
}
// 表格第一列的样式
.fromhead{
  display: flex;
  font-size: 12px;
}
.fromhead-x{
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
}
.fromhead-a{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  >div{
    height: 17px;
  }
}
// 添加分销商的数据
.increase{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  margin-top: 10px;
  input{
    width: 150px;
    height:20px;
    text-align: center;
  }
  select{
    width: 160px;
    height:25px;
    text-align: center;
  }
}
.increase-x{
  display: flex;
  align-items: center;
}
.span2{
  width: 100px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  height:50px;
}
.aa{
  margin-bottom: 40px;
}
/deep/.el-select .el-input__wrapper{
    height: 26px !important
}
</style>